<html>
    
    <head>
        <title>Turbulenz - Getting Started Guide - API Example</title>
        <script src="jslib/debug.js"></script>
        <script src="jslib/webgl/turbulenzengine.js"></script>
        <script src="jslib/webgl/graphicsdevice.js"></script>
        <script src="jslib/draw2d.js"></script>
        <script src="jslib/canvas.js"></script>
        <script src="jslib/utilities.js"></script>
        <script src="jslib/textureeffects.js"></script>
        <script src="TextureFactory.js"></script>
		<script type="text/javascript" src="./PathFinding.js-master/lib/pathfinding-browser.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
            TurbulenzEngine = WebGLTurbulenzEngine.create({
                canvas: document.getElementById("canvas")
            });
        </script>
        <script src="jslib/vmath.js"></script>
    </head>
    
    <body>
        <canvas id="canvas" width="800px" height="600px" />
        <script>
            TurbulenzEngine = WebGLTurbulenzEngine.create({
                canvas: document.getElementById("canvas")
            });

            var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});

            var mathDevice = TurbulenzEngine.createMathDevice({});
           var canvas = Canvas.create(graphicsDevice, mathDevice);
			var canvas2 = document.getElementById('canvas');
            var draw2D = Draw2D.create({
                graphicsDevice: graphicsDevice
            });
            var ctx = canvas.getContext('2d');
            var viewportRect = [0, 0, 800, 600];
            
            // Array with TileMap textures
            var tileArray = new Array();
            var texturePathsArray = [];
			var walkPathArray = new Array();

            ////// TileMap Variabels X = width Y = height
            var tileXCount = 8;
            var tileYCount = 8;
            var tileHeight = 32;
            var tileWidth = 32;
            var mapX = 320;
            var mapY = 196;
			
			var finder = new PF.AStarFinder();
			var endX = 96;
			var endY = 96;
			var stopWalk = false;
			var startWalk = false;
			var characterX = 96;
			var characterY = 96;
			var resetWalk = false;
			var walkArray = new Array();
            ////// Color Variables
            var r = 1.0,
                g = 0.0,
                b = 0.0,
                a = 1.0;
            var bgColor = [r, g, b, a];
			
            ////// Coordinate Variables
            var x1 = 50;
            var y1 = 50;
            var x2 = graphicsDevice.width - 50;
            var y2 = graphicsDevice.height - 50;

            // Arrays with Tiles
            var map = Array(3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 3, 2, 2, 3, 3, 2, 2, 1, 1, 2, 2, 2, 2, 3, 3, 2, 2, 1, 1, 1, 1, 2, 2, 3, 3, 2, 1, 1, 1, 1, 1, 2, 2, 3, 3, 2, 2, 2, 1, 2, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3);
            var map2 = Array(2, 2, 1, 1, 1, 2, 2, 2, 2, 1, 1, 2, 2, 2, 1, 1, 2, 2, 2, 2, 1, 2, 2, 2, 2);
			 var map3 = Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
var grid = new PF.Grid(tileXCount, tileYCount, map3);             
//             Online loading of Tiles with JSon
//            var JsonUrl = "http://socialsurvivor.immoralstudios.com/miniMap2.json";            
//            $.ajax({
//                url: 'http://anyorigin.com/get?url=http://socialsurvivor.immoralstudios.com/miniMap2.json&callback=?',
//                type: 'GET',
//                dataType: "jsonp",
//                success: function (data) {
//                    tileHeight = data.contents.tileheight;
//                    tileWidth = data.contents.tilewidth / 2;
//                    tileXCount = data.contents.height;
//                    tileYCount = data.contents.width;
//                    map2 = data.contents.layers[0].data;                    
//                    // Gets all texture paths from Json file
//                    for(var key in data.contents.tilesets) {
//                        var tile = new Object();
//                        tile.path = data.contents.tilesets[key].image;
//                        tile.imageHeight = data.contents.tilesets[key].imageheight;
//                        tile.imageWidth = data.contents.tilesets[key].imagewidth;
//                        texturePathsArray[key++] = tile;    
//                    }
//                    // TODO Fixa så att inläsningen kan avgöra hur många tiletexture ett tileSet innehåller
//                    tileArray = createTextureArray(texturePathsArray);
//                }
//            });
            
            var sprite = Draw2DSprite.create({
                width: 128,
                height: 128,
                x: graphicsDevice.width / 2,
                y: graphicsDevice.height / 1.5,
                color: [1.0, 1.0, 1.0, 1.0],
                textureRectangle: [128, 128, 256, 0]
            });

            var backgroundSprite = Draw2DSprite.create({
                width: 640,
                height: 640,
                x: graphicsDevice.width / 2,
                y: graphicsDevice.height / 2,
                color: [1.0, 1.0, 1.0, 1.0],
            });

            // TODO Ta bort koden nedan. Den är obsolete
            var crateImageParameters = {
                src: "img/tile5.png",
                mipmaps: true,
            };

            var crateImage2Parameters = {
                src: "img/tile1.png",
                mipmaps: true,
            };

            var crateImage3Parameters = {
                src: "img/tile2.png",
                mipmaps: true,
            };
			var crateImageChess = {
                src: "img/postionTestMap.png",
                mipmaps: true,
            };
			var chessTex = graphicsDevice.createTexture(crateImageChess);

            tileArray[1] = graphicsDevice.createTexture(crateImageParameters);
            tileArray[2] = graphicsDevice.createTexture(crateImage2Parameters);
            tileArray[0] = graphicsDevice.createTexture(crateImage3Parameters);

            ////////////////////////
			//ctx.addEventListener(eventType, eventListener);
//			var eventType = 'mousedown';
//			var eventListener =  function mousedown(e) {

               //newXmouse = e.pageX;
                //newYmouse = e.pageY;
                //isPlayerMoving = true;
           // }
			
			canvas2.addEventListener("mousedown", mouseClick, false);
			function mouseClick(e) {

             //Hämtar värden för vart karaktären står och vart musen befinner sig.
				Xmouse = Math.floor((e.pageX-96)/64);
                Ymouse = Math.floor((e.pageY-96)/64);
				CXmouse = Math.floor((characterX-96)/64);
				CYmouse = Math.floor((characterY-96)/64);
			//Denna kontroll aktiveras ifall karaktären inte nått slutet av arrayen, då används resetWalk, som
				//längre ner tillåter att karaktären går klart sista steget och sedan avbryter.
				if(walkArray.length != 0 && stopWalk){walkArray = new Array(); resetWalk=true; startWalk=false;}
				//CheckNewNavigation() kollar om användaren har ändrat slutmål att gå till. returnerar falskt ifall 
				// De kordinater i parametrarna inte stämmer med de på sista plasen i walkArrayen som används.
				else if(!CheckNewNavigation(Xmouse,Ymouse)){startWalk=false;}
				if (!startWalk){
				var gridBackup = grid.clone();
				var path = finder.findPath(CXmouse, CYmouse, Xmouse, Ymouse, gridBackup);
				walkArray = path;
				endX = (walkArray[0][0] * 64)+96;
				endY = (walkArray[0][1] * 64)+96;
					}
				//Ifall det är första gången visar den bara vägen som är uträknad. Vid andra musklick om oförändrar så 					börjar karaktären att gå.
				if (startWalk){stopWalk = true;} 
				else{
				createWalkPath(walkArray);	
				}
				//alert(Xmouse +" - " + Ymouse);

            }
			var WalkPathSprite  = Draw2DSprite.create({
                width: 32,
                height: 32,
                color: [1.0, 1.0, 1.0, 1.0],
                textureRectangle: [0, 0, 32, 32]
            });
             //  sprite.setTextureRectangle([64,0,128,64]);
            var newsprite = graphicsDevice.createTexture({
                src: "img/StepTile.png",
                mipmaps: true,
                onload: function(newsprite) {
                    if (newsprite) {
                        WalkPathSprite.setTexture(newsprite);
                        WalkPathSprite.setTextureRectangle([0, 0, 32, 32]);

                    }
                }
            });
			 var characterSprite = Draw2DSprite.create({
                width: 12,
                height: 12,
                x: characterX,
                y: characterY,
                color: [1.0, 1.0, 1.0, 1.0],
                rotation: Math.PI / 4,
                textureRectangle: [64, 0, 128, 64]
            });
          
            var newsprite = graphicsDevice.createTexture({
                src: "img/tileFlat4.png",
                mipmaps: true,
                onload: function(newsprite) {
                    if (newsprite) {
                        characterSprite.setTexture(newsprite);
                       characterSprite.setTextureRectangle([64, 0, 128, 64]);

                    }
                }
            });
			 var itemSprite = Draw2DSprite.create({
                width: 64,
                height: 64,
                x: 250,
                y: 250,
                color: [1.0, 1.0, 1.0, 1.0],
                rotation: 0,
                textureRectangle: [0, 0, 64, 64]
            });
          
            var S = graphicsDevice.createTexture({
                src: "img/humanny.png",
                mipmaps: true,
                onload: function(S) {
                    if (S) {
                        itemSprite.setTexture(S);
                       itemSprite.setTextureRectangle([0, 0, 64, 64]);

                    }
                }
            });
			var crateImageWalkTile =graphicsDevice.createTexture( {
                src: "img/StepTile.png",
                mipmaps: true,
            });
			// Function för att jämföra de kordinater som är i parametern stämmer med de sista i walkArrayen.
			//Returnerar falsk ifall det inte fånns några värden i arrayen.
		
			function CheckNewNavigation(x,y){
				if(walkArray == 0){return true;}
				
					var arr = walkArray;
					L = walkArray.length -1;
					arr = walkArray;
				if(arr[L][0] != x){return false;}
				if(arr[L][1] != y){return false;}
				return true;	
			}
			//creatWalkPath har en array med kordinater som parameter, skapar sedan ett nytt spriteobjekt för varje antal kordinatset som finns i parametern.
			
			function createWalkPath(array){		 
				walkPathArray = new Array();
				for (i = 1; i <array.length; i++){
				var pathTile =  Draw2DSprite.create({ width: 32,
                height: 32,textureRectangle: [0, 0, 32, 32]});
				pathTile.x = (array[i][0]* 64)+96;
				pathTile.y = (array[i][1]* 64)+96;
				pathTile.setTexture(crateImageWalkTile);
				pathTile.setScale([0.1,0.1]);					
				walkPathArray.push(pathTile);
				
				}
				
			startWalk = true;
			
			}
			 function newDirection(newPos, oldPos) {

                if (newPos > oldPos) {
                    return oldPos +=1;
                }
                if (newPos < oldPos) {
                    return oldPos -=1;
				}
				return oldPos;
            }
			function correctPos(newPos, oldPos)
			{ if (newPos == oldPos){return true;}
					return false;
			}
			var startX = 0;
			var startY = 0;
			var timer = 0;
			var Nr = 1;
			// scaleUpArray har en array med spriteObjekt som parameter, den kollar scale på första objektet och plussar på den 0.05 ifall den är under 1. Den avbryter loopen om den behövt plussa på någonstans, denna används för att ge effekten att vägtilesen flyter upp.
			function scaleUpArray(spriteArr){
			var retArray = new Array();
				retArray = spriteArr;
				
				for(i = 0; i<retArray.length; i++){	
					//scale här får en array med två platsen som är bredd och höjd.
					var scale = retArray[i].getScale();
					//scale[0] = bredd, scale [1] = höjd. 
					if(scale[0] <1)
					{ scale[0] +=0.05;  scale[1] +=0.05;
					retArray[i].setScale(scale);
					 return retArray;
					}
				
				}
			return retArray;
			
			}
            function update() {
				timer++;
                sprite.setOrigin([128, 0]);
                sprite.setOrigin([128, 0]);
                /* Begin render */
                if (graphicsDevice.beginFrame()) {
                    //                    graphicsDevice.clear(bgColor, 1.0);                 
                    //                    draw2D.begin('alpha');
                    //                    draw2D.drawSprite(sprite);                    
                    //                    draw2D.end();                         

                    ctx.beginFrame(graphicsDevice, viewportRect);
                    var tilePosition = 0;
                   // for (i = 0; i < tileXCount; i++) {
//                        for (j = 0; j < tileYCount; j++) {
//                            var drawTile = map3[tilePosition];
//                            var xPos = (j - i) * tileWidth + mapX;
//                            var yPos = (j + i) * tileHeight / 2 + mapY;
//                            ctx.drawImage(tileArray[drawTile], xPos, yPos, 64, 64);
//                            tilePosition++;
//						if (yPos > startY){ startX = xPos; startY = yPos;}		
//                        }
//						
                //   }
					ctx.drawImage(chessTex,64, 64, 512, 512);
					//Om startWalk är sann så visar den vägen användaren kommer att gå. här loopar den igenom walkPatharrayen och kallar på metoden scaleUpArray varje gång för att höja scale på varje spriteobjekt.
					
					if(startWalk){
						 walkPathArray = scaleUpArray(walkPathArray);
						draw2D.begin('alpha');
							for (var i=0; i< walkPathArray.length; i++){	
								
								draw2D.drawSprite(walkPathArray[i]);
							}
						  draw2D.end();
						
					}
					//stopwalk blir sann ifall startWalk är klar och användaren inte bytt position.
					if(stopWalk){ 
						//Kollar om karaktären anlänt vid sista rutans position, ifall detta ej är true, så hoppar den ner och plussar på x,y,
					if(correctPos(characterX, endX) && correctPos(characterY, endY)){
						//Om resetWalk blivit aktiverad så har användaren byt under resans väg. Då behöver den inte gå längre och ställer om variablar till startVärde.
						if(resetWalk){Nr=1;stopWalk=false; resetWalk=false;}
						//Annars kollar den om det är slutet på arrayen och den är klar. Isåfall ställs värden om, 
						else if((Nr) == walkArray.length) {Nr=1; walkArray = new Array(); stopWalk=false; startWalk=false;}
						else {
							//har karaktären en bit kvar, byter den bara slutkordinater från walkArrayen och fortsätter ett varv till.
					 endX = (walkArray[Nr][0] * 64)+96;
					 endY = (walkArray[Nr][1]* 64)+96;
							walkPathArray.shift();
						Nr++;
						}
					}
						else {
							characterX = newDirection(endX,characterX);
							characterY = newDirection(endY,characterY);
							characterSprite.x = characterX;
							characterSprite.y = characterY;
						}
					}
                    ctx.endFrame();
//					draw2D.begin('alpha');
//                    draw2D.drawSprite(WalkPathSprite);
//                    draw2D.end();
					draw2D.begin('alpha');
                    draw2D.drawSprite(itemSprite);
                    draw2D.end();
					draw2D.begin('alpha');
                    draw2D.drawSprite(characterSprite);
                    draw2D.end();
                    graphicsDevice.endFrame();
                }
            }

            TurbulenzEngine.setInterval(update, 1000 / 60);
        </script>
    </body>

</html>